<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 

        BFC:就是一种渲染规则
        规则：  
            1 块级元素自上而下的排列
            2 上下的margin会重叠 
            3 盒子从左边开始
            4 BFC不会和浮动发生重叠 ！！！！！！！！！
            5 子元素不影响外面的元素   margin-top  
            6 浮动参与高度计算    浮动本身没有参与高度计算

        触发条件
            overflow:hidden / auto / scroll
            float:left/right


        用处：  
            解决margin-top   5 
            清除浮动         6
            自适应两栏布局    4

     -->
    
</body>
</html>